<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			#header{
				width: 100%;
				height: 200px;
				/*边框和背景颜色：检测页面元素是否选中*/
				background-color: #362d1c;
				text-align: center;
				bor der: 1px solid red;
				/*id选择器和class选择器区别？
				  id用于页面结构搭建，class位于id中结构中进行微调部分
				*/
			}
			#main {
			    width: 100%;
			    height: 400px;
			    background-color: #f5f5f5;
			    text-align: center;
			    line-height: 400px;
			}
			#footer {
			    width: 100%;
			    height: 100px;
			    background-color: #222;
			    color: white;
			    text-align: center;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 选择器：抓取页面元素 
		    ①元素选择器：以元素名称作为选择器，抓取页面元素
			②伪类选择器：在其他选择器上附加效果    ：hover  鼠标悬停时
			                                   ：before  在元素前生成文本，结合content属性
											   ：after  在元素后生成文本，结合content属性
			③类选择器：以1个别名或者多个别名进行抓取页面元素
			④通用选择器：抓取页面中的所有元素，规范页面效果【盒模型：内外边距、字体】
		   *⑤id选择器：以别名的形式抓取页面元素【唯一性：用于页面架构搭建、切片】
		    语法：  html 前标记 id="别名"
			       css   #别名
		-->
		<div id="header">页头</div>
		<div id="main">页主体</div>
		<div id="footer">页尾</div>
		<!-- 设置页主体 body，页尾 footer，宽度100%，高度、颜色自定 -->
	</body>
</html>